<template>
  <div class="information">
    <PageHead
      title="个人信息"
      background="var(--background-color)"
      @back="goBack"
    ></PageHead>

    <section class="pl-16">
      <form ref="formRef">
        <List title="头像" :show-avatar="false">
          <img :src="getAvatar()" width="46" height="46" @click="uploadFile" />
        </List>
        <List title="用户名" :show-avatar="false" :show-arrow="false">
          <div class="input flex-1">
            <input
              v-model="store.master.username"
              required
              type="text"
              placeholder="请输入姓名"
            />
          </div>
        </List>
        <List title="微信号" :show-avatar="false" :show-arrow="false">
          <div class="input flex-1">
            <input
              v-model="store.master.wxId"
              required
              type="text"
              placeholder="请输入微信号"
            />
          </div>
        </List>
      </form>
    </section>
  </div>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import List from '@/views/components/list/List.vue';
  import { getAvatar, getUserStore } from '@/store/user/utils';
  import { toBase64, useUploadFile } from '@/utils/file';
  import { goBack } from '../me/me';
  import avatarPng from '../assets/avatar.jpg';

  const store = getUserStore();

  const uploadFile = async () => {
    const file = await useUploadFile({
      accept: 'image/*',
      size: 1024 * 10,
    });
    store.master.avatar = await toBase64(file[0]);
  };
</script>

<style lang="scss" scoped>
  .information {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: var(--background-color);
    z-index: 10;
    section {
      background-color: white;
    }
  }
</style>
